<style type="text/css">
	.f_left{float: left;}
    .myorder-section{position: relative;}
    .selected{height: 9.78rem;width: 100%;position: absolute;top: 0.9rem;left: 0;z-index: 100;}
    .selected .selected1.active{color:#0068b7;}
    .select-list{display: none;}
    .selected1{width: 100%;height:.84rem;line-height: .84rem;border-bottom: 1px solid #eeeeee;background-color: #fff;text-indent: .2rem;}
    .black{width: 100%; height: 100%;background-color: rgba(51, 51, 51, 0.3);}
    .myorder-list  {transition:transform .3s;transform:translate(0,0);}
    .myorder-list.active{transform:translate(100%,0);}
    .myorder-section .select_list li a{display: block;width: 70%;height: 100%;text-align: center;}
    .myorder-section .select_list li  em{display:block;width:30%;height:100%;transition: transform .3s;-webkit-transition: transform .3s;}
    .myorder-section .select_list li  em.active{transform: rotateZ(180deg);-webkit-transform: rotateZ(180deg);}
</style>
<div class="mycount-group">
    <section class="myorder-section">
        <ul class="select_list">
            <li class="type">
                <a href="javascript:void (0)" class="f_left">类型</a><em class="f_left iconfont icon-i-bottom-arrow"></em>
            </li>
            <li class="date">
                <a href="javascript:void (0)" class="f_left">时间</a><em class="f_left iconfont icon-i-bottom-arrow"></em>
            </li>
            <li class="status">
                <a href="javascript:void (0)" class="f_left">状态</a><em class="f_left iconfont icon-i-bottom-arrow"></em>
            </li>
        </ul>
        <div class="selected">
            <div>
                <div class="select-list" data-index="0">
                    <p class="selected1 active" data-code="all">类型</p>
                    <p class="selected1" data-code="1">11</p>
                    <p class="selected1" data-code="2">22</p>
                </div>
                <div class="select-list" data-index="1">
                    <p class="selected1 active" data-code="all">当前</p>
                    <p class="selected1" data-code="day">当天</p>
                    <p class="selected1" data-code="week">一周</p>
                    <p class="selected1" data-code="month">一个月</p>
                </div>
                <div class="select-list" data-index="2">
                    <p class="selected1 active" data-code="all">状态</p>
                    <p class="selected1" data-code="0">待支付</p>
                    <p class="selected1" data-code="1">支付成功</p>
                    <p class="selected1" data-code="2">支付失败</p>
                    <p class="selected1" data-code="3">异常订单</p>
                    <p class="selected1" data-code="4" >取消订单</p>
                </div>
            </div>
            <div class="black"></div>
        </div>
        <div class="order-list"></div>
    </section>
</div>
